<template>
  <view id="kaochang-moni-container-wrap">
    <navbar title="真实考场模拟" mode="kaochang-navbar"></navbar>
    <view :style="{width:containerStyle.width, height:containerStyle.height, transform:containerStyle.transform,'transform-origin':containerStyle['transform-origin'] }" v-if="inited" class="kaochang-moni-container">
      <view :class="['header', 'kemu'+kemu]"></view>
      <view class="info">
        <view class="f1">
          <view class="label">考试须知</view>
          <view class="tips">1.遵守考场纪律，服从监考人员指挥。</view>
          <view class="tips">2.进入考场、手机关机。禁止抽烟，禁止吃零食。</view>
          <view class="tips">3.未经工作人员允许，考生禁止随意出入考场。</view>
          <view class="tips">4.考场内禁止大声喧哗，禁止随意走动。 开始考试。</view>
          <view class="tips">5.考试中认真答题，不准交头接耳。</view>
          <view class="tips">6考试中不准冒名顶替，不准弄虚作假。</view>
          <view class="tips">7.注意考场卫生，禁止随地叶痰，禁止乱扔纸屑。</view>
          <view class="tips">8.爱护公物及考试设备。 答案。</view>
        </view>
        <view class="divider"></view>
        <view class="f1">
          <view class="label">理论考试01号考台</view>
          <view class="name">考试姓名：{{mine.name||'游客'}}</view>
          <view class="flex v vc hc">
            <view class="start-btn" @click="toMoni">开始考试</view>
          </view>
          <view class="tips2">操作提示:每题考试答案确定后，点击[下一题] ，电脑立即判定所选答案，如选择错误，系统将提示正确答案，提示后不允许修改答案。</view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'
import Navbar from "../../components/navbar.vue";

export default {
  components: {Navbar},
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0,
      inited: false,
      rotate: true,
      kemu: 1
    }
  },
  computed: {
    ...mapGetters(['systemInfo', 'mine', 'topBar']),
    containerStyle() {
      if (this.rotate) {
        return {
          width: this.screenHeight + 'px',
          height: this.screenWidth + 'px',
          transform: 'rotate(90deg)',
          'transform-origin': this.screenWidth / 2 + 'px'
        }
      }
      return {
        height: this.screenHeight + 'px',
        width: this.screenWidth + 'px',
        transform: '',
        'transform-origin': '',
      }
    }
  },
  onLoad({kemu}) {
    this.kemu = kemu
    setTimeout(() => {
      this.initInfoRect()
    }, 300)
  },
  methods: {
    async initInfoRect() {
      this.$ = uni.createSelectorQuery()
      console.log('initInfoRect')
      const containerRect = await this.queryViewRect('#kaochang-moni-container-wrap')
      console.log('initInfoRect', containerRect)

      this.screenWidth = containerRect.width
      this.screenHeight = containerRect.height
      if (this.topBar.style === 'custom') {
        this.screenHeight -= this.topBar.height
      }
      this.inited = true
    },
    queryViewRect(selector) {
      return new Promise(resolve => {
        this.$.select(selector).boundingClientRect((res) => {
          console.log(res)
          resolve(res)
        }).exec()
      })
    },
    toMoni() {
      uni.redirectTo({
        url: '/pages/kaochang_moni/kaochang_moni?kemu='+this.kemu,
      });
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;

  ::v-deep .kaochang-navbar {
    background-color: #f5f1ef;
  }
}

#kaochang-moni-container-wrap {
  background-color: #f5f1ef;
  height: 100%;

  .kaochang-moni-container {
    display: flex;
    flex-direction: column;

    .header {
      &.kemu1 {
        background-image: url("http://down.qwdata.vip/app_icon/1686626659217");
      }
      &.kemu4 {
        background-image: url("http://down.qwdata.vip/app_icon/1686649560099");
      }
      height: 78px;
      background-size: cover;
    }

    .info {
      border: 1px solid #CDCDCD;
      margin: 10rpx;
      flex: 1;
      display: flex;

      .divider {
        width: 1px;
        background-color: #cdcdcd;
      }

      .label {
        margin-left: 30rpx;
        margin-top: 58rpx;
        font-size: 14px;
        color: #030303;
        font-weight: bold;
      }
      .name {
        font-size: 14px;
        color: #DF5B3D;
        line-height: 18px;
        margin-left: 30rpx;
        margin-top: 20rpx;
      }
      .start-btn {
        font-size: 16px;
        color: #FFFFFF;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0095E8;
        border-radius: 12rpx;
        align-self: center;
        width: 220rpx;
        height: 80rpx;
        margin-top: 60rpx;
        margin-bottom: 60rpx;
      }

      .tips2 {
        font-size: 12px;
        color: #6c6c6b;
        line-height: 18px;
        margin-left: 30rpx;
        margin-top: 5px;
      }
    }

    .tips {
      font-size: 12px;
      color: #555;
      line-height: 18px;
      margin-left: 30rpx;
      margin-top: 5px;
    }
  }
}
</style>
